<template>
    <div class="article-item">
        <!-- {{rowData}} -->
        <el-row :gutter="20" v-for="(row, index) in rowData" :key="index" class="row-item">
            <el-col>
                <label>标题:</label>
                <el-input
                        class="row-ipt"
                        placeholder="请输入文章标题"
                        v-model="row.title">
                </el-input>
            </el-col>
            <el-col>
                <label>链接:</label>
                <el-input
                        class="row-ipt"
                        placeholder="请输入文章链接"
                        v-model="row.link">
                </el-input>
            </el-col>
            <el-col>
                <i v-if="(index+1) == 1" class="add-icon el-icon-circle-plus" @click="addRow(row)"></i>
                <i v-else class="add-icon el-icon-remove" @click="deleteRow(row)"></i>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: 'ArticleItem',
        props: {
            propData: {
                type: Array,
                required: false,
                default:function(){
                    return [{
                        id: 0,
                        title: '',
                        link: '',
                    }]
                }
            }
        },
        data () {
            return {
                rowData: [
                    {
                        id: 0,
                        title: '',
                        link: '',
                    }
                ]
            }
        },
        watch: {
            'rowData': {
                deep:true,
                handler(val){
                    this.$emit('ArticleItemChange', val)
                }
            }
        },
        methods: {
            addRow (row) {
                for(let idx in this.rowData){
                    this.rowData[idx].id == idx
                }
                let obj = {
                    //row.id + 1,
                    id: this.rowData.length,
                    title: '',
                    link: '',
                }
                this.rowData.push(obj)
            },
            deleteRow (row) {
                for(let idx in this.rowData){
                    if(this.rowData[idx].id == row.id){
                        this.$delete(this.rowData, idx)
                        break;
                    }
                }
            }
        },
        created() {
            if (this.propData.length > 0) {
                for(let idx in this.propData){
                    this.propData[idx]['id'] = parseInt(idx)
                }
                this.rowData = this.propData;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .article-item {
        color: #5a5e66;
        font-size: 14px;
        .row-item {
            margin-bottom: 20px;
        }
        .el-col-24 {
            width: inherit;
        }
        .el-col {
            .row-ipt {
                width: inherit;
                min-width: 100px;
                font-size: 12px;
                margin-right: 5px;
            }
            .add-icon {
                color: #2da3fb;
                font-size: 30px;
            }
        }
        .el-col:first-child {
            label {
                line-height: 32px;
            }
        }
        .el-col+.el-col {
            padding-left: 0 !important;
        }
        .el-col:first-child:before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
        }
    }
</style>
